<template>
    <div class="goods">
        <!--面包屑导航-->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
                <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
                <el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--nav导航-->
        <div class="nav">
            <div class="product_nav">
                <div class="title">分类</div>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane
                        v-for="item in categoryList"
                        :key="item.category_id"
                        :label="item.category_name" :name="''+item.category_id">
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!--主要内容-->
        <div class="main">
            <!--商品列表-->
            <div v-if="allProduct.length" class="list">
                <my-list :list="allProduct"></my-list>
            </div>
            <div v-else class="list">
                <p style="font-size:20px;">抱歉没有找到相关的商品，请看看其他的商品</p>
            </div>
            <!--分页-->
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :page-size="queryInfo.pageSize"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import goodsAPI from "../utils/api/goodsAPI";

export default {
  name: "Goods",
  created() {
    //获取所有分类
    this.getCategory();
  },
  activated() {
    //接收传递过来的值
    console.log(this.$route.query);

    let search = this.$route.query.search;
    if (search) {
      this.search = search;
      this.getProductBySearch();
      return;
    }

    //如果this.$globalData.$categoryArr存在长度 就证明是点击浏览更多按钮进入页面的
    if (this.$globalData.$categoryArr.length) {
      this.queryInfo.categoryID = this.$globalData.$categoryArr;
      this.$globalData.$categoryArr = [];
      this.activeName = "-1";
      this.getProduct();
    } else {
      //证明用户直接点击链接进入当前页面或者刷新页面进入的
      let num = Number(this.activeName);
      this.activeName = num !== -1 ? this.activeName : "0";
    }
  },
  data() {
    return {
      search: "", //搜索条件
      activeName: "-1", //选项卡切换名称
      categoryList: [], //商品分类信息
      allProduct: [], //所有商品数据
      queryInfo: {
        categoryID: [], //分类id
        currentPage: 1, //当前页
        pageSize: 15 //每页显示多少条
      },
      total: 0 //总条数
    };
  },
  watch: {
    activeName(val) {
      //切换分类会触发当前的watch
      if (val === "-1") return;
      //初始化数据
      this.queryInfo.currentPage = 1;
      this.total = 0;
      this.search = "";

      //切换分类获取相关分类的数据
      let categoryID = Number(val);

      //获取当前的activeName值 如果是0则表示请求全部数据,如果不是0那么就请求相应的分类数据
      this.queryInfo.categoryID = categoryID === 0 ? [] : [categoryID];

      this.getProduct();
    },
    //监听路由改变
    $route(val) {
      //在当前页面去改变了搜索条件
      console.log(val);
      if (val.query.search) {
        //更新搜索条件
        this.search = val.query.search;
        //数据初始化
        this.activeName = "-1";
        this.queryInfo.currentPage = 1;
        this.total = 0;
        //重新获取搜索数据
        this.getProductBySearch();
      }
    }
  },
  methods: {
    //获取商品分类信息
    async getCategory() {
      let { data: res } = await goodsAPI.getCategory();
      this.categoryList = res.category;
      this.categoryList.unshift({
        category_id: 0,
        category_name: "全部"
      });
    },
    //获取所有商品数据
    async getProduct() {
      let apiName = this.queryInfo.categoryID.length
        ? "getProductByCategory"
        : "getAllProduct";
      let { data: res } = await goodsAPI[apiName](this.queryInfo);
      this.allProduct = res.Product;
      this.total = res.total;
    },
    //页码变化时调用currentChange方法
    currentChange(currentPage) {
      this.queryInfo.currentPage = currentPage;
      if (this.search) {
        this.getProductBySearch();
      } else {
        this.getProduct();
      }
    },
    //通过搜索条件请求商品列表
    async getProductBySearch() {
      let sendData = {
        currentPage: this.queryInfo.currentPage,
        pageSize: 15,
        search: this.search
      };
      let { data: res } = await goodsAPI.getProductBySearch(sendData);
      this.allProduct = res.Product;
      this.total = res.total;
    }
  }
};
</script>

<style scoped lang="scss">
.goods {
  background-color: #f5f5f5;

  /* 面包屑CSS */
  .el-tabs--card .el-tabs__header {
    border-bottom: none;
  }
  .breadcrumb {
    height: 50px;
    background-color: #ffffff;
    .el-breadcrumb {
      margin: 0 auto;
      width: 1225px;
      line-height: 30px;
      font-size: 16px;
    }
  }

  .nav {
    background-color: #ffffff;

    .product_nav {
      margin: 0 auto;
      width: 1225px;
      height: 40px;
      line-height: 40px;

      .title {
        float: left;
        width: 50px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  .main {
    margin: 0 auto;
    max-width: 1225px;

    .list {
      min-height: 650px;
      margin-top: 14.5px;
      margin-left: -13.7px;
      overflow: auto;
    }

    .pagination {
      height: 50px;
      text-align: center;
    }
    .none-product {
      color: #333;
      margin-left: 13.7px;
    }
  }
}
</style>